<!-- 溯源信息 -->
<template>
	<view style="padding: 20upx 30upx;">
		<!-- 原材料信息 -->
		<view class="row-between rawMaterial" @click="active = !active">
			<view class="">原材料信息</view>
			<uni-icons :type="active ? 'arrowup' : 'arrowdown'" size="18" color="#666666"></uni-icons>
		</view>
		<view class="column-div card-view" v-if="active && dataList.length">
			<view v-for="(item, index) in dataList" style="width: 100%;" class="card-view-item">
				<view class="row-between card-headline" @click="dataIndex = dataIndex == index ? null : index" :style="dataIndex == index ? 'border-bottom: 1px solid #EEEEEE;' : ''">
					<view style="font-weight: bold;">{{item.sourceResultForm.title}}</view>
					<uni-icons :type="dataIndex == index ? 'arrowup' : 'arrowdown'" size="18" color="#666666"></uni-icons>
				</view>
				<view style="width: 100%; padding: 0 50upx;" class="column-div" v-if="dataIndex == index">
					<view style="font-size: 26upx;color: #999999;font-weight: 500;width: 100%; margin: 30upx 0;" v-if="item.capitalHash">产品hash：</view>
					<view style="width: 100%;border-bottom: 1px solid #EEEEEE; padding-bottom: 45upx;align-items: flex-start;" class="row-between" v-if="item.capitalHash">
						<view style="font-size: 26upx;font-weight: 500;color: #FE5E49;word-break: break-all;line-height: 42upx;flex:1">{{item.capitalHash}}</view>
						<view class="column-div copy-view" style="margin-left: 43upx;" @click="copyEvent(item.capitalHash)">
							<image src="/static/assets/copy.png" style="width: 31upx;height: 33upx;margin-bottom: 6upx;"></image>
							<view class="">复制</view>
						</view>
					</view>
					<view class="row-between cell-view" v-for="formItem in item.sourceResultForm.sourceDetailResultFormList">
						<view>{{formItem.key}}</view>
						<view style="color: #333333;">{{formItem.value}}</view>
					</view>
					<view class="row-between cell-view">
						<view>原料溯源：</view>
						<view  @click="sourceEvent(item)" style="color: #FE5E49;" hover-class="none">点击查看</view>
					</view>
					<view class="row-between cell-view" style="align-items: flex-start;">
						<view>原料图片：</view>
						<image :src="sourceImgSite + item.sourceResultForm.images" mode="aspectFill" style="width: 140upx;height: 140upx;border-radius: 10upx;" @click="$api.previewImage([sourceImgSite + item.sourceResultForm.images])"></image>
					</view>
				</view>
			</view>
		</view>

		<view class="column-div card-title">
			<view class="row-between card-title-view" :style="activeTow ? 'border-bottom: 1px solid #EEEEEE;' : ''" @click="activeTow = !activeTow">
				<view style="font-size: 30upx;color: #333333;font-weight: bold;">质检信息</view>
				<uni-icons :type="activeTow ? 'arrowup' : 'arrowdown'" size="18" color="#666666"></uni-icons>
			</view>
			<view style="width: 100%; padding: 0 50upx;bo" class="column-div" v-if="activeTow && qualityEntity">
				<view style="font-size: 26upx;color: #999999;font-weight: 500;width: 100%; margin: 30upx 0 ;" v-if="qualityEntity.checkHash">质检hash：</view>
				<view style="width: 100%;border-bottom: 1px solid #EEEEEE; padding-bottom: 45upx; align-items: flex-start;" class="row-between" v-if="qualityEntity.checkHash">
					<view style="font-size: 26upx;font-weight: 500;color: #FE5E49;word-break: break-all;line-height: 42upx;flex:1">{{qualityEntity.checkHash}}</view>
					<view class="column-div copy-view" style="margin-left: 43upx;" @click="copyEvent(qualityEntity.checkHash)">
						<image src="/static/assets/copy.png" style="width: 31upx;height: 33upx;margin-bottom: 6upx;"></image>
						<view class="">复制</view>
					</view>
				</view>
				<view class="row-between cell-view" v-if="qualityEntity.checkAgency">
					<view>检验机构：</view>
					<view style="color: #333333;">{{qualityEntity.checkAgency}}</view>
				</view>
				<view class="row-between cell-view" v-if="qualityEntity.checkMeans">
					<view>检验方式：</view>
					<view style="color: #333333;">{{qualityEntity.checkMeans}}</view>
				</view>
				<view class="row-between cell-view" v-if="qualityEntity.checkSendTime">
					<view>送检时间：</view>
					<view style="color: #333333;">{{qualityEntity.checkSendTime}}</view>
				</view>
				<view class="row-between cell-view" v-if="qualityEntity.checkStartTime">
					<view>检验时间：</view>
					<view style="color: #333333;">{{qualityEntity.checkStartTime}}</view>
				</view>
				<view class="row-between cell-view" v-if="qualityEntity.checkPerson">
					<view>检验人：</view>
					<view style="color: #333333;">{{qualityEntity.checkPerson}}</view>
				</view>
				<view class="row-between cell-view" v-if="qualityEntity.checkResults">
					<view>检验结果：</view>
					<view style="color: #333333;">{{qualityEntity.checkResults}}</view>
				</view>
				<view class="row-between cell-view" v-if="qualityEntity.checkAgency">
					<view>检验负责人：</view>
					<view style="color: #333333;">{{qualityEntity.checkAgency}}</view>
				</view>
				<view class="row-between cell-view" style="align-items: flex-start;" v-if="qualityEntity.checkReport">
					<view>检验报告：</view>
					<image :src="sourceImgSite + qualityEntity.checkReport" mode="aspectFill" style="width: 243upx;height: 318upx;border-radius: 10upx;" @click="$api.previewImage([sourceImgSite + qualityEntity.checkReport])"></image>
				</view>
			</view>
		</view>

		<!-- <view class="row-between rawMaterial" @click="active = active == 2 ? null : 2">
			<view class="">其他资质</view>
			<uni-icons :type="active == 2 ? 'arrowup' : 'arrowdown'" size="18" color="#666666"></uni-icons>
		</view>
 -->
		<view class="column-div card-title">
			<view class="row-between card-title-view" :style="activeThree ? 'border-bottom: 1px solid #EEEEEE;' : ''" @click="activeThree = !activeThree">
				<view style="font-size: 30upx;color: #333333;font-weight: bold;">其他资质</view>
				<uni-icons :type="activeThree ? 'arrowup' : 'arrowdown'" size="18" color="#666666"></uni-icons>
			</view>
			<view style="width: 100%; padding: 0 50upx;bo" class="column-div" v-if="activeThree && capitalEntity">
				<view style="font-size: 26upx;color: #999999;font-weight: 500;width: 100%; margin: 30upx 0 ;" v-if="capitalEntity.checkHash">资质hash：</view>
				<view style="width: 100%;border-bottom: 1px solid #EEEEEE; padding-bottom: 45upx; align-items: flex-start;" class="row-between" v-if="capitalEntity.checkHash">
					<view style="font-size: 26upx;font-weight: 500;color: #FE5E49;word-break: break-all;line-height: 42upx;flex:1">{{capitalEntity.checkHash}}</view>
					<view class="column-div copy-view" style="margin-left: 43upx;" @click="copyEvent(capitalEntity.checkHash)">
						<image src="/static/assets/copy.png" style="width: 31upx;height: 33upx;margin-bottom: 6upx;"></image>
						<view class="">复制</view>
					</view>
				</view>
				<view class="row-between cell-view" style="align-items: flex-start;" v-if="capitalEntity.capitalImg">
					<view>资质证书：</view>
					<image :src="sourceImgSite + capitalEntity.capitalImg" mode="aspectFill" style="width: 243upx;height: 318upx;border-radius: 10upx;" @click="$api.previewImage([sourceImgSite + capitalEntity.capitalImg])"></image>
				</view>
			</view>
		</view>

	</view>

</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		props: {
			traceabilityId: String,
			goodsCd: String,
			parentId:String
		},
		computed: {
			...mapState(['hasLogin', 'downUrl', 'sourceImgSite', 'url'])
		},
		data() {
			return {
				active: true,
				activeTow: false,
				activeThree: false,
				dataList: [],
				dataIndex: 0,
				qualityEntity: null,
				capitalEntity: null
			}
		},
		beforeMount() {
			this.infoRequest()
		},
		methods: {
			sourceEvent (item) {
				console.log(item)
				// if (!item.sourceId) return;sourceResultForm.images
				uni.navigateTo({
					url: `/pages/detail/productTraceability/productTraceability?active=0&sourceId=${item.id}&coverPicture=${item.sourceResultForm.images}`
				})
				// :url="'/pages/detail/productTraceability/productTraceability?active=1&goodsCd='+item.goodsCd+'&sourceId='+item.sourceId"
			},
			async infoRequest () {
				this.active = true;
				this.dataList = [];
				this.dataIndex = 0;
				this.qualityEntity = null;
				this.capitalEntity= null;
				await this.getRequest();
				await this.getQualityInformation()
				await this.getRequestCapital()
				this.$api.hideLoading()
				uni.stopPullDownRefresh()
			},
			copyEvent(text) {
				uni.setClipboardData({
					data: text,
					success: () => uni.showToast({
						title: '已复制'
					})
				})
			},
			getRequest() {
				return this.$api.globalUtil.requestAjax({
					url: '/goodsSourceApi/source',
					method: "POST",
					data: {
						goodsCd: this.goodsCd || '',
						parentId: this.parentId || '',
					},
					success: (res) => this.dataList = res.data.success ? res.data.response || [] : [],
				});
			},
			getQualityInformation() {
				return this.$api.globalUtil.requestAjax({
					url: '/goodsSourceApi/check',
					method: "POST",
					data: {
						id: this.traceabilityId
					},
					success: (res) => {
						if (!res.data.success) return;
						let checkSendTime = res.data.response.checkSendTime
						let checkStartTime = res.data.response.checkStartTime
						let time = new Date(checkSendTime - 0)
						res.data.response.checkSendTime = `${time.getFullYear()}.${time.getMonth() + 1 }.${time.getDate()}`
						time = new Date(checkStartTime - 0)
						res.data.response.checkStartTime = `${time.getFullYear()}.${time.getMonth()  + 1 }.${time.getDate()}`
						this.qualityEntity = res.data.response;
					}
				});
			},
			getRequestCapital() {
				return this.$api.globalUtil.requestAjax({
					url: '/goodsSourceApi/capital',
					method: "POST",
					data: {
						id: this.traceabilityId
					},
					success: (res) => this.capitalEntity = res.data.success ? res.data.response : null,
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.card-view {
		width: 690upx;
		margin: auto;
		background: #FFFFFF;
		box-shadow: 0px 4upx 8upx 0px rgba(86, 86, 86, 0.04);
		border-radius: 16upx;
		margin-bottom: 30upx;
		.card-view-item {
			border-top: 1px solid #EEEEEE;
			&:first-child {
				border-top: none;
			}
			.card-headline {
				width: 100%;
				padding: 30upx 37upx;
				// #EEEEEE
				border-left: none;
				border-right: none;
				font-size: 26upx;
				font-family: PingFang SC;
				color: #666666;
			}
		}
	}

	.copy-view {
		width: 90upx;
		height: 90upx;
		background: #FFFFFF;
		border: 1px solid #EEEEEE;
		box-shadow: 0px 3upx 8upx 0px rgba(172, 170, 170, 0.2);
		border-radius: 45upx;
		font-size: 22upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.cell-view {
		width: 100%;
		padding: 35upx 0;
		font-size: 26upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		border-bottom: 1px solid #EEEEEE;

		&:last-child {
			border: none;
		}
	}

	.card-title {
		width: 690upx;
		background: #FFFFFF;
		box-shadow: 0px 4upx 8upx 0px rgba(86, 86, 86, 0.04);
		border-radius: 16upx;
		margin-bottom: 30upx;

		.card-title-view {
			width: 100%;
			padding: 40upx 30upx;
		}
	}

	/* 原材料信息 */
	.rawMaterial {
		padding: 40upx 30upx;
		background: #FFFFFF;
		box-shadow: 0upx 4upx 8upx 0upx rgba(86, 86, 86, 0.04);
		border-radius: 16upx;
		margin-bottom: 30upx;

		view:first-of-type {
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
	}
</style>
